<template>
            <el-menu
                    style="width:100%;height:100%;"
                    active-text-color="#ffd04b"
                    background-color="rgb(48 65 86)"
                    text-color="#fff"
                    :default-active="navTabStores.current"
                    @open="handleOpen"
                    @close="handleClose"
            >
                <el-menu-item index="个人主页"  @click="to('', {name:'个人主页', path:'/currMain'})">
                    <el-icon><User /></el-icon>
                    <span>个人主页</span>
                </el-menu-item>
                <el-sub-menu :index="item.path" v-for="item in menu" :key="item.id">
                    <template #title>
                        <el-icon><component :is="item.icon"></component></el-icon>
                        <span>{{item.name}}</span>
                    </template>
                        <el-menu-item :index="sub.name" v-for="sub in item.children" @click="to(item.path, sub)">
                            {{sub.name}}
                        </el-menu-item>
                </el-sub-menu>
            </el-menu>
</template>

<script setup>
    import {onBeforeMount,reactive } from 'vue'
    import {useRouter} from 'vue-router'
    import { openState } from '@/stores/openState'
    import {navTab} from '@/stores/navTab'
    let navTabStores = navTab()
    let menuState = openState()
    const router=useRouter()
    const handleOpen = (key, keyPath) => {
    }
    const handleClose = (key, keyPath) => {
    }
    let menu =reactive([])
    onBeforeMount (function(){
        let menudb = JSON.parse(sessionStorage.getItem("menus")||"[]")
        menu.push(...menudb)
    })
    function to(parPath , menuItem) {
        let item = { name: menuItem.name, path:parPath + menuItem.path, clicked:true}
        navTabStores.routeTo(item)
    }
</script>
